<template>
<view :class="'contanier ' + goparam + ' '">
  <view class="store_count" v-if="store_count > 0">共 {{store_count}} 家店铺</view>
  <block v-for="(item, index) in store_list" :key="index">
    <view class="jtxx_dz" @tap="goStore" :data-store_id="item.store_id">
      <view class="address_box">
        <view class="add_box_t clearfix">
          <view class="name left">{{item.name}}</view>
          <view class="range right" v-if="item.range">{{item.range}}</view>
        </view>
        <view class="address">{{item.adress}}</view>
      </view>
      <view class="location" @click.stop="goStoreMap" :data-index="index" :data-store_id="item.store_id"></view>
    </view>
  </block>
</view>
</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();

export default {
  data() {
    return {
      mer_id: 0,
      store_list: [],
      store_count: 0,
      goparam: ''
    };
  },

  onShareAppMessage: function () {},
  onReachBottom: function () {},
  onPullDownRefresh: function () {},
  onUnload: function () {},
  onHide: function () {},
  onShow: function () {},
  onReady: function () {},
  onLoad: function (options) {
    if (!options.mer_id) {
      options.mer_id = app.merchantOwn.mer_id;
    }

    if (!options.goparam) {
      options.goparam = '';
    }

    this.setData({
      mer_id: options.mer_id,
      goparam: options.goparam
    });

    if (options.goparam == 'shop') {
      wx.setNavigationBarTitle({
        title: '请选择门店'
      });
    }

    common.getLocation('getLocation', this, 'baidu');
  },
  components: {},
  props: {},
  methods: {
    getLocation: function (gps) {
      var postData = {
        mer_id: this.mer_id
      };

      if (gps) {
        postData.lng = gps.lng;
        postData.lat = gps.lat;
        postData.store_type = this.goparam;
      }

      common.post('Wxapp_merchant&a=store_list', postData, "setMainContent", this);
    },
    setMainContent: function (result) {
      this.setData({
        store_list: result,
        store_count: result.length
      });
      wx.hideToast();
    },
    goStore: function (e) {
      var store_id = e.currentTarget.dataset.store_id;

      if (this.goparam == 'shop') {
        wx.navigateTo({
          url: "../shop/shop?store_id=" + store_id
        });
      } else {
        wx.navigateTo({
          url: "../store/detail?store_id=" + store_id
        });
      }
    },
    goStoreMap: function (e) {
      if (this.goparam == '') {
        var index = e.currentTarget.dataset.index;
        var dataset = {
          type: 'baidu',
          name: this.store_list[index].name,
          address: this.store_list[index].adress,
          lng: this.store_list[index].lng,
          lat: this.store_list[index].lat
        };
        common.openMap(dataset);
      } else {
        this.goStore(e);
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
page{
  background:white;
}
.store_count{
  text-align: center;
  color:#999;
  height:100rpx;
  line-height:100rpx;
  font-size:30rpx;
  border-bottom:1rpx solid #f1f1f1;
}
.jtxx_dz {
  padding: 24rpx 100rpx 24rpx 24rpx;
  border-bottom: 1rpx solid #f1f1f1;
  position: relative;
}
.address_box{
  border-right:1rpx solid #f1f1f1;
  padding:0 20rpx;
}
.add_box_t {
  line-height:40rpx;
  margin-bottom:14rpx;
}
.add_box_t .name{
  font-size:32rpx;
}
.add_box_t .range{
  font-size:28rpx;
  color:#666;
}
.address{
  font-size:24rpx;
  color:#666;
}
.location{
  position:absolute;
  right:0;
  top:0;
  width:100rpx;
  height:100%;
  background:url(https://hf.pigcms.com/static/wxapp/dbt_03.png) center center no-repeat;
}


.contanier.shop .store_count{
  display:none;
}
.contanier.shop .address_box{
  border-right:none;
}
.contanier.shop .location{
  background:none;
}
.contanier.shop .location:after {
    display: block;
    content: "";
    border-top:2rpx solid #BFBFBF;
    border-left:2rpx solid #BFBFBF;
    width:16rpx;
    height:16rpx;
    -webkit-transform: rotate(135deg);
    background-color: transparent;
    position: absolute;
    top: 50%;
    right:46rpx;
    margin-top: -10rpx;
}
</style>